import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import bk from "./asset/bk.png";
import backpng from "./asset/back.png";
import { getSize } from "@/command/apiTool";
import * as vant from "vant";
const { showFailToast } = vant;
import { useRequest } from "./request";

export default defineComponent({
  name: "",
  setup() {
    const { form, codeButtonText, loadSuccessCallback, login, back } =
      useRequest();

    const verifyPhone = () => {
      return /^1[3-9]\d{9}$/.test(form.value.phone);
    };

    const loadErrorCallback = () => {
      var appid = "196383120";
      // 生成容灾票据或自行做其它处理
      var ticket =
        "terror_1001_" + appid + "_" + Math.floor(new Date().getTime() / 1000);
      loadSuccessCallback({
        ret: 0,
        randstr: "@" + Math.random().toString(36).substr(2),
        ticket: ticket,
        errorCode: 1001,
        errorMessage: "jsload_error",
      });
    };

    const sendCode = () => {
      // 验证手机号
      if (!verifyPhone()) {
        showFailToast({ message: "请输入正确的手机号" });
        return;
      }
      // 防止重复点击
      if (codeButtonText.value != "获取验证码") {
        showFailToast("请勿重复点击");
        return;
      }
      try {
        var captcha = new window.TencentCaptcha(
          "196383120",
          loadSuccessCallback,
          {}
        );
        // 调用方法，显示验证码
        captcha.show();
      } catch (error) {
        // 加载异常，调用验证码js加载错误处理函数
        loadErrorCallback();
      }
    };

    const renderBk = () => {
      return (
        <div
          class="h-[245px] w-full"
          style={{ backgroundImage: `url(${bk})`, backgroundSize: "100% 100%" }}
        />
      );
    };
    const renderBack = () => {
      return (
        <div
          onClick={() => back()}
          style={{
            width: getSize(18),
            height: getSize(18),
            backgroundImage: `url(${backpng})`,
            backgroundSize: "100% 100%",
          }}
        />
      );
    };
    const renderTitle = () => {
      return (
        <div class="flex flex-col mt-[30px]">
          <div class="text-[27px] text-[#333] font-bold">您好，欢迎登录！</div>
          <div class="text-[13px] text-[#666]">推荐使用手机号验证码登录</div>
        </div>
      );
    };
    const renderFormItem = (item: any) => {
      return (
        <div class="flex flex-col mt-[33px]">
          <div class="text-[#333333] text-[16px]">{item.label}</div>
          <div class="flex items-center justify-between">
            <input
              v-model={(form.value as any)[item.key]}
              class="mt-[20px]"
              type={item.type}
              maxlength={item.maxlength}
              placeholder={item.placeholder}
            />
            {item.type == "password" && (
              <div class="text-[#999999] text-[14px]" onClick={sendCode}>
                {codeButtonText.value}
              </div>
            )}
          </div>
        </div>
      );
    };
    const renderForm = () => {
      return (
        <div class={style.form}>
          {renderFormItem({
            label: "手机号",
            key: "phone",
            placeholder: "请输入手机号",
          })}
          {renderFormItem({
            label: "短信验证码",
            key: "code",
            placeholder: "请输入验证码",
            type: "password",
            maxlength: 6,
          })}
        </div>
      );
    };
    const renderButton = () => {
      return (
        <div
          class="mt-[40px] flex items-center justify-center cursor-pointer "
          style={{
            color: "white",
            fontSize: getSize(16),
            height: getSize(45),
            borderRadius: getSize(28),
            background: "linear-gradient(161deg, #1DB2FF 0%, #047BFF 100%)",
          }}
          onClick={login}
        >
          登录
        </div>
      );
    };
    const renderBody = () => {
      return (
        <div class="absolute left-[15px] top-[30px] right-[15px]">
          {renderBack()}
          {renderTitle()}
          {renderForm()}
          {renderButton()}
        </div>
      );
    };
    return () => {
      return (
        <div class="flex flex-col relative">
          {renderBk()}
          {renderBody()}
        </div>
      );
    };
  },
});
